import React from 'react'
import Head from 'next/head'

import Header from '../components/Header'
import Author from '../components/Author'
import Advert from '../components/Advert'
import Footer from '../components/Footer'
import Tocify from '../components/tocify.tsx'

import axios from 'axios'
import servicePath from "../config/apiUrl"

import { Row, Col, Breadcrumb, Affix } from 'antd'
import { FieldTimeOutlined, VideoCameraOutlined, FireOutlined, FileFilled } from '@ant-design/icons';

import styles from '../styles/pages/detailed.module.css'

// Markdown 插件
/* import ReactMarkdown from 'react-markdown'
import MarkdownNavbar from 'markdown-navbar'; */
import { marked } from 'marked'
import hljs from "highlight.js";

const Detailed = (props) => {
  // 右侧导航
  const tocify = new Tocify()

  const renderer = new marked.Renderer();
  renderer.heading = function (text, level, raw) {
    const anthor = tocify.add(text, level)
    return `<a id="${anthor}" href="#{anthor}" class="anchor-fix"><h${level}></h${level}</a>`
  }
  marked.setOptions({
    renderer,
    gfm: true,
    pedantic: false,
    sanitize: false,
    tables: true,
    breaks: false,
    smartLists: true,
    smartypants: false,
    highlight: function (code) {
      return hljs.highlightAuto(code).value
    }
  })
  let html = marked(props.content)

  return (
    <>
      <Head>
        <title>博客详情页</title>
      </Head>
      <Header />
      <Row className="comm-main" type="flex" justify="center">
        <Col className="comm-left" xs={24} sm={24} md={16} lg={18} xl={14}  >
          <div>
            <div className="bread-div">
              <Breadcrumb>
                <Breadcrumb.Item><a href="/">首页</a></Breadcrumb.Item>
                <Breadcrumb.Item>{props.typeName}</Breadcrumb.Item>
                <Breadcrumb.Item>{props.title}</Breadcrumb.Item>
              </Breadcrumb>
            </div>
            <div>
              <p className={styles['detailed-title']}>{props.title}</p>
              <div className="list-icon center">
                <span>
                  <FieldTimeOutlined /> {props.addTime}
                </span>
                <span>
                  <VideoCameraOutlined /> {props.typeName}
                </span>
                <span>
                  <FireOutlined /> {props.view_count}人
                </span>
                <span>
                  <FileFilled /> 共 {props.part_count} 集
                </span>
              </div>
              {/* 将 dom字符串 转化为 dom节点 */}
              <div className={styles['detailed-content']} dangerouslySetInnerHTML={{ __html: html }} >
                {/* <ReactMarkdown>{markdown}</ReactMarkdown> */}
              </div>
            </div>
          </div>

        </Col>
        <Col className="comm-box" xs={0} sm={0} md={7} lg={5} xl={4}>
          <Author />
          <Advert />
          <Affix offsetTop={5}>
            <div className={`${styles['detailed-nav']} comm-box`}>
              <p className={styles['nav-title']}>文章目录</p>
              {/* <MarkdownNavbar className={styles['article-menu']} source={html} ordered={false} /> */}
              {tocify && tocify.render()}
            </div>
          </Affix>

        </Col>
      </Row>
      <Footer />
    </>
  )
}

Detailed.getInitialProps = async (ctx) => {
  let id = ctx.query.id
  const promise = new Promise(resolve => {
    axios(servicePath.getArticleById + id).then(res => {
      // console.log(res);
      resolve(res.data.data[0])
    })
  })
  return await promise
}

export default Detailed